<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta content="telephone=no" name="format-detection">
    <title>优惠券查询</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="apple-touch-icon-precomposed" href="">
    <meta name="apple-mobile-web-app-title" content=""/>
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="//cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="//cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="//cdn.staticfile.org/moment.js/2.22.1/moment.min.js"></script>
    <style>
        .title {
            border-left: #ff9900 solid 5px !important;
            padding: .2rem 1rem;
        }

        .big_font {
            font-size: 1.2rem;
        }
    </style>
    <script id="template_result" type="text">
<div class="row no-gutters">
    <div class="col mr-1">
        <div class="title border text-secondary">用户姓名</div>
        <div class="pl-4 py-2">
            {name}
        </div>
    </div>
    <div class="col">
        <div class="title border text-secondary">电话</div>
        <div class="pl-4 py-2">
            {phone}
        </div>
    </div>
</div>
<div class="row no-gutters">
    <div class="col mr-1">
        <div class="title border text-secondary">省份</div>
        <div class="pl-4 py-2">
            {province}
        </div>
    </div>
    <div class="col">
        <div class="title border text-secondary">城市</div>
        <div class="pl-4 py-2">
            {city}
        </div>
    </div>
</div>
<div class="title border text-secondary">意向车型</div>
<div class="pl-4 py-2">
    {intent_car}
</div>
<div class="title border text-secondary">优惠券信息</div>
<div class="pl-4 py-2">
    {coupon_info}
</div>
<div class="title border text-secondary">优惠券使用状态</div>
<div class="pl-4 py-2">
    {coupon_status}
</div>
    </script>
    <script>
        $(()=>{
            $('#do_search').click(search);
        });

        function search(e){
            let data = $('#phone').val();
            if (data === '') {
                alert('请输入要查询的手机号');
                return
            }
            $.post('/serv/coupon/find',JSON.stringify({phone:data}),function(res){
                if (res.status) {
                    let tmp = $("#template_result").html();
                    let item = res.data;
                    $('#search_result').html(tmp
                        .replace('{name}',item.name)
                        .replace('{phone}',item.phone)
                        .replace('{province}',item.province)
                        .replace('{city}',item.city)
                        .replace('{intent_car}',item.intent_car)
                        .replace('{coupon_info}',item.coupon_info)
                        .replace('{coupon_status}',
                            item.coupon_status === '0' ? "<span class='badge badge-secondary'>未使用</span>":
                        "<span class='badge badge-success'>已使用</span>"
                        ));
                } else {
                    $('#search_result').html('<div class="text-secondary text-center big_font">没有找到用户信息<br/>' +
                        '温馨提示：若未查询到信息，请致电客服：<a href="tel:17713548594">177 1354 8594</a>' +
                        '</div>');
                }
            },'json')
        }
    </script>
</head>
<body class="p-2 bg-light">
<div class="form-group">
    <label for="phone">用户手机</label>
    <input type="text" class="form-control" id="phone" placeholder="输入要查询的用户手机号">
</div>
<div class="mb-3">
    <button id="do_search" class="btn btn-primary btn-block">查询</button>
</div>
<div id="search_result">

</div>
</body>
</html>